<template>
	<div class="zuzhiguanli flex">
    <left2></left2>

    <div class="flex animate__animated animate__fadeIn">
      <div style="width: 380px; height: 100vh; padding: 20px; background: #FFFFFF; overflow: auto; position: relative;">
        <el-tree  class="filter-tree" @node-click="handleNodeClick" @node-contextmenu="openMenu" :data="data" :props="defaultProps" node-key="treeId"
                  :default-expanded-keys="zhankaiarray" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" :filter-node-method="filterNode" ref="tree">
        </el-tree>

        <div v-show="menuVisible" class="custom-menu" :style="{left: menuPosition.x + 'px', top: menuPosition.y + 'px'}" >
          <div class="li" @click="logshow" v-if="youjiandangqian.type == 1">添加报告</div>
        </div>
      </div>

      <div class="youbian" style="padding: 30px 0; width: calc(100vw - 620px);">

        <div style="padding:0 30px;">
            <el-table :data="list" style="width: 100%;">
              <el-table-column align="center" prop="dictId" label="ID"></el-table-column>
              <el-table-column align="center" prop="devStateStr" label="设备状态"></el-table-column>
              <el-table-column align="center" prop="strategyStr" label="维护策略"></el-table-column>
              <el-table-column align="center" prop="reason" label="故障或劣化部位特征"></el-table-column>
              <el-table-column align="center" prop="runAdvice" label="运行维护建议"></el-table-column>
              <el-table-column align="center" prop="advice" label="维护建议"></el-table-column>
              <el-table-column align="center" prop="checkTime" label="检查时间"></el-table-column>

              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <div class="flexcc">
                    <div style="color: #0093F6; cursor: pointer; margin: 0 10px;" @click="bianji(scope.row)">修改</div>
                    <!-- <div style="color: #f00; cursor: pointer; margin: 0 10px;" @click="shanchu(scope.row)">删除</div> -->

                  </div>
                </template>
              </el-table-column>
            </el-table>

            <el-pagination style="padding: 20px; text-align: right;"
              @current-change="fanye"
              background
              :page-size="search.size"
              layout="total,prev, pager, next"
              :total="total">
            </el-pagination>
        </div>
      </div>

    </div>



    <el-dialog :title="logtitle" center :visible.sync="log" width="600px"  :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="true">

        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>设备状态</div>
          <div>
            <el-select v-model="all.devState" style="width: 350px; margin-left: 30px;"  clearable filterable placeholder="请选择设备状态">
                <el-option  v-for="item in xialaall.devStatelist" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>维护策略</div>
          <div>
            <el-select v-model="all.strategy" style="width: 350px; margin-left: 30px;"  clearable filterable placeholder="请选择维护策略">
                <el-option  v-for="item in xialaall.strategylist" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </div>

        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>故障或劣化部位特征</div>
          <div><el-input v-model="all.reason" style="width: 350px; margin-left: 30px;" placeholder="请输入故障或劣化部位特征"></el-input></div>
        </div>

        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>运行维护建议</div>
          <div><el-input v-model="all.runAdvice" style="width: 350px; margin-left: 30px;" placeholder="请输入运行维护建议"></el-input></div>
        </div>

        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>维护建议</div>
          <div><el-input v-model="all.advice" style="width: 350px; margin-left: 30px;" placeholder="请输入维护建议"></el-input></div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>检查时间</div>
          <el-date-picker v-model="all.checkTime" type="datetime" style="width: 250px; margin-left: 30px;" value-format="yyMMddHHmmss" placeholder="选择时间"></el-date-picker>
        </div>

    	  <span slot="footer" class="dialog-footer">
          <el-button type="danger" round @click="log = false">取消</el-button>
          <el-button type="danger" round @click="add">确定</el-button>
    	  </span>
    </el-dialog>

	</div>
</template>

<script>
  import { gettreeshebei } from '@/api/xitong'
  import { getreport,removereport,updatereport,addreport,postxiala } from '@/api/jiancebaogao'
  // import { getxiala } from '@/api/zidian'
  import left2 from '@/view/left2.vue'
	export default {
		name: 'zuzhiguanli',
    components:{
      left2
    },
		data() {
			return {
        all:{
          devId:"",//设备id
          devState:"",//设备状态（通过字典report_check_sbzt获取）
          strategy:"",//维护策略（通过字典report_check_whcl获取）
          reason:"",//故障或劣化部位特征
          runAdvice:"",//运行维护建议
          advice:"",//维护建议
          checkTime:"",//检查时间
          reportState:""//报告状态（0草稿|1提交）
        },
        list:[],
        search:{
            "page":1,
            "size":10,
            "param":{
              devId:""
            }
        },
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        total:0,

        log:false,
        logtitle:"",

        xialaall:{
          devStatelist:"",
          strategylist:""
        },
        data:[],

        menuVisible: false,
        menuPosition: { x: 0, y: 0 },

        youjiandangqian:"",
        zhankaiarray:[]
			}
		},
		created() {
      Promise.all([this.getxialalist(),this.getxialalist1()]).then(()=>{

        this.getshebi()
      })
		},
		mounted() {

		},
		methods: {
      //删除
      // shanchu:function(item){
      //   this.$confirm('此操作将永久删除, 是否继续?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //     removetype(item.dictId).then((response)=>{
      //       this.$message.success('删除成功');
      //       this.getlist()
      //     })
      //   })
      // },

      //修改初始化
      bianji:function(item){
        this.logtitle = '修改报告'
        this.all = {
          checkId:item.checkId,
          devId:item.id,//设备id
          devState:item.devState,//设备状态（通过字典report_check_sbzt获取）
          strategy:item.strategy,//维护策略（通过字典report_check_whcl获取）
          reason:item.reason,//故障或劣化部位特征
          runAdvice:item.runAdvice,//运行维护建议
          advice:item.advice,//维护建议
          checkTime:item.checkTime,//检查时间
          reportState:item.reportState//报告状态（0草稿|1提交）
        }
        this.log = true
      },


      //新建初始化
      logshow:function(){
        this.logtitle = '新增报告'
        this.all = {
          devId:"",//设备id
          devState:"",//设备状态（通过字典report_check_sbzt获取）
          strategy:"",//维护策略（通过字典report_check_whcl获取）
          reason:"",//故障或劣化部位特征
          runAdvice:"",//运行维护建议
          advice:"",//维护建议
          checkTime:"",//检查时间
          reportState:""//报告状态（0草稿|1提交）
        }
        this.log = true
      },

      //新建修改确定
      add:function(){
        if(this.all.checkId){
          updatereport(this.all).then((response)=>{
            this.$message.success('修改成功');
            this.log = false
            this.getlist()
          })
        }else{
          addreport(this.all).then((response)=>{
            this.$message.success('新增成功');
            this.log = false
            this.getlist()
          })
        }
      },

      //检索
      searchgo:function(){
        this.search.page = 1
        this.getlist()
      },

      //获取报告列表
      getlist:function(){
        getreport(this.search).then((response)=>{
          this.list = response.data.result
          this.total = response.data.count
        })
      },

      //翻页
      fanye:function(val){
        this.search.page = val
        this.getlist()
      },


      //获取下拉数据用
      getxialalist:function(){
        let obj = {
          sysName:"检测报告",
          dictName:"检测报告-维护策略",
          dictType:""
        }
        return new Promise((res,rej)=>{
          postxiala(obj).then(response => {
            this.xialaall.strategylist = response.data
            res()
          })
        })
      },
      //获取下拉数据用
      getxialalist1:function(){
        let obj = {
          sysName:"检测报告",
          dictName:"检测报告-设备状态",
          dictType:""
        }
        return new Promise((res,rej)=>{
          postxiala(obj).then(response => {
            this.xialaall.devStatelist = response.data
            res()
          })
        })
      },

      //打开右键弹框
      openMenu(event, data, node, element) {
        console.log(data)
        //右键临时赋值
        this.youjiandangqian = data



        this.menuPosition.x = event.clientX;
        this.menuPosition.y = event.clientY;
        this.menuVisible = true;
        event.preventDefault();

        document.addEventListener('click', this.closeMenu);
      },
      //关闭
      closeMenu() {
        //右键取消赋值
        // this.youjiandangqian = ""
        this.menuVisible = false;
        console.log(this.menuVisible)
        document.removeEventListener('click', this.closeMenu); // 移除点击事件监听
      },

      //获取树 下面树相关点击方法
      getshebi:function(){
        gettreeshebei().then(response => {
          this.data = response.data
        })
      },
      handleCommand:function(val){
        this.youjiandangqian = ''
      },
      handleNodeExpand(data, node, instance) {
        this.zhankaiarray.push(data.treeId);
      },
      handleNodeCollapse(data, node, instance) {
        const index = this.zhankaiarray.indexOf(data.treeId);
        if (index > -1) {
          this.zhankaiarray.splice(index, 1);
        }
      },
      handleNodeClick(data) {
        console.log(data)
        if(data.type == 1){
          this.search.param.devId = data.value
          this.getlist()
        }
      },
      filterNode(value, data) {
        // if (!value) return true;
        // return data.label.indexOf(value) !== -1;
      },
		}
	}
</script>


<style scoped >
  .custom-menu {
    position: fixed;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 5px;
    overflow: hidden;
    z-index: 3000;

  }
  .li{
    cursor: pointer; color: #005AFF; padding:10px 20px; font-size: 12px;
    &:hover{ background: #005AFF !important; color:#fff !important;}
  }
</style>
